<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width: 100px;height: 100px;background: red;position: absolute;left:0px;top:0;}
        .box2{width: 100px;height: 100px;background: green;position: absolute;left:0;top:130px;}
        .line{width:1px;height: 500px;background: black;position: absolute;left:800px;top:0;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="line"></div>
</body>
<script>
    const obox1 = document.querySelector(".box1")
    const obox2 = document.querySelector(".box2")

    obox1.onclick = function(){
        move(obox1, "left", 800);
    }
    obox2.onclick = function(){
        move(obox2, "left", 800);
    }

    function move(ele, attr, target){
        // 为了保证每个元素的计时器不受其他元素影响，需要将计数器的返回值保存到对应的元素身上
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            let now = parseInt(getStyle(ele, attr));
            let speed = (target - now) / 7;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(target === now){
                clearInterval(ele.t);
                ele.style[attr] = target + "px";
            }else{
                ele.style[attr] = now + speed + "px";
            }
        }, 30);
    }
    function getStyle(ele, attr){
        if(getComputedStyle){
            return getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

</script>
</html>